<div class="gallery-tag gallery-style">
  <div class="gallery-section {% if section.settings.text != blank %} little-text {% endif %} {% unless section.settings.full_width %} page-width{% endunless %}">
    <div{% if section.settings.full_width %} class="page-width"{% endif %}>
        <h2 class="title">
          <span>{{ section.settings.heading }}</span>
        </h2>
        {% if section.settings.text != blank %}
          <div class="text center">{{ section.settings.text }}</div>
        {% endif %}
    </div>
    <div class="swiper-father">
      <div class="swiper-container swiper gallery-swiper-style">
          <div class="swiper-wrapper">
              {%- for block in section.blocks -%} 
                <div class="swiper-slide" data-swiper-parallax="-600" {{ block.shopify_attributes }}>         
                  <div class="video-img">
                    {% if block.settings.iframe_video != blank %}
                    <div class="video-list">
                        <div class="iframe_video iframe-container">
                          {% if block.settings.iframe_video != blank %}
                            {{ block.settings.iframe_video }}
                          {%- endif -%} 
                        </div>
                    </div>
                  {% else %}
                  <div class="pc-banner image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
              {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
              >
              <img srcset="
                {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                {%- if block.settings.image.width >= 1140 -%}{{ block.settings.image | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if block.settings.image.width >= 1200 -%}{{ block.settings.image | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}" sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" data-src="{{ block.settings.image | img_url: '1500x' }}" loading="lazy" class="lazyload" alt="{{ block.settings.image.alt | escape }}" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}">
                </div>
                  <div class="image_mobile image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
              {% if block.settings.height == 'adapt' and block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
              >
              <img srcset="
                {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 710 -%}{{ block.settings.image_mobile | img_url: '710x' }} 710w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 1140 -%}{{ block.settings.image_mobile | img_url: '1140x' }} 1140w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 1200 -%}{{ block.settings.image_mobile | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}" sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" data-src="{{ block.settings.image | img_url: '1500x' }}" loading="lazy" class="lazyload" alt="{{ block.settings.image_mobile.alt | escape }}" width="{{ block.settings.image_mobile.width }}" height="{{ block.settings.image_mobile.height }}">
                  </div>
                {%- endif -%} 
                {% if block.settings.text != blank %}
                  <div class="video-loop-content">
                      <div class="text">{{ block.settings.text }}</div> 
                    {% if block.settings.richtext != blank %}
                      <div class="richtext">{{ block.settings.richtext }}</div>
                    {% endif %}
                  </div>
                {% endif %}
                  </div>
                </div>
              {%- endfor -%}            
          </div>
          <div class="swiper-button-next">{% render 'swiper-button-next' %}</div>
          <div class="swiper-button-prev">{% render 'swiper-button-prev' %}</div>
      </div>
      <div class="swiper-pagination style-pagination"></div>
    </div>
  </div>
</div>



<script>
    var swiper = new Swiper('.gallery-swiper-style', {
        speed: 600,
        loop:true,
        centeredSlides: true,
        observeParents:true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        loopAdditionalSlides: 100,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination.style-pagination',
          bulletElement : 'li',
          speed: 1000,
        },
        breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      375: {
        slidesPerView: 1.2,
        spaceBetween: 20,
      },
      750: {
        slidesPerView: 1.,
        spaceBetween: 20,
        centeredSlides: false,
      },
      751: {
        slidesPerView: 2,
        spaceBetween: 20,
        centeredSlides: true,
      },
      1280: {
        slidesPerView: 2,
        spaceBetween: 20,
        centeredSlides: true,
      },
      1440: {
        slidesPerView: 2,
        spaceBetween: 20,
        centeredSlides: true,
      }
    }
      });
</script>

{% schema %}
{
  "name": "Gallery style",
  "tag": "section",
  "class": "spaced-section gallery-loop",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "heading"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full width",
      "default": false
    }
  ],
  "blocks":[
  {
    "type": "block",
    "name": "block",
    "settings": [
    {
      "type": "html",
      "id": "iframe_video",
      "label": "Iframe video"
    },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image mobile"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "adapt"
          },
          {
            "value": "small",
            "label": "small"
          },
          {
            "value": "large",
            "label": "large"
          }
      ],
        "default": "adapt",
        "label": "adapt"
      },
      {
        "type": "text",
        "id": "text",
        "label": "Describe"
      },
      {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      }
    ]
  }
  ],
  "presets": [
    {
      "name": "Gallery style"
    }
  ]
}
  {% endschema %}